<template>
<!--博客页分类-->
<div>
<!--标签选择-->
  <el-row style="">
    <el-menu :default-active=this.activeIndex class="el-menu--popup" mode="horizontal" @select="handleSelect">
      <el-col span="6">
        <el-menu-item index="1-1-1" @click="home('全部','1-1-1')">全部</el-menu-item>
      </el-col>
      <el-col span="6" >
        <el-menu-item index="1-1-2" @click="home('美食','1-1-2')">美食</el-menu-item>
      </el-col>
      <el-col span="6" >
        <el-menu-item index="1-1-3" @click="home('风景','1-1-3')">风景</el-menu-item>
      </el-col>
      <el-col span="6" >
        <el-menu-item index="1-1-4" @click="home('人文','1-1-4')"> 人文</el-menu-item>
      </el-col>
    </el-menu>
  </el-row>
<!--博客展示-->
  <ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto; padding-left: 0px;
          margin-top: 0px;">
    <li v-for="id in blogIDList" class="infinite-list-item">
      <router-view :blogID="id" :key="new Date()"/>
    </li>
  </ul>
</div>
</template>

<script>
import {getBlogs} from "@/api/api";
import {setSession} from "@/utils/Token";
import {getSession} from "@/utils/Token";
import {getHot} from "@/api/api";

export default {
  name: "home_main",
  props:['blogIDList'],
  data(){
    return{
      activeIndex:'1-1-1',
      count:0,
      blogIDList:[],
    }
  },
  methods: {
    /*懒加载进行博客正文创建*/
    load () {
      this.count += 2
    },
    /*全部--美食--风景--人文----跳转*/
    home(select1,index){
      let str;
      if(getSession('title1')!=null){
        str = getSession('title1') +'-'+ select1;
      }else {
        str ='主页-'+ select1;
      }
      setSession("activeIndex",index);
      setSession("title",str);
      this.Request(getSession('title1'));

    },
    /*请求博客ID列表*/
    Request(t){
      if(t != '热门') {
        getBlogs(getSession('title'),1).then((res) => {
          if (res.data.status === 200) {
            this.blogIDList = res.data.data;
          }
        })
      }else {
          getHot(getSession('title')).then((res) =>{
            if(res.data.status === 200){
              this.blogIDList = res.data.data;
            }
          })
      }
    }
  },
  /*挂载，对于选择框位置进行校正*/
  mounted() {
    if(getSession("activeIndex")!=null) {
      this.activeIndex = getSession("activeIndex");
    }
  },
}
</script>

<style scoped>

</style>